<template>
  <Modal v-model="modal" title="改变张数">
    <div>
      <Form :label-width="60" :model="form" ref="form" :rules="rules">
        <FormItem label="张数" prop="quantity">
          <InputNumber :precision="0" :min="1" :max="9999" v-model="form.quantity" class="w150"/>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      modal: false,
      form: {
        quantity: 1
      },
      btnDisabled: false,
      rules: {
        quantity: [{ required: true, message: '输入张数', type: 'number', trigger: 'change' }]
      }
    };
  },
  methods: {
    updateForm(id, quantity) {
      this.$refs.form.resetFields()
      this.id = id
      this.form.quantity = quantity
      this.btnDisabled = false
      this.openModal()
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      if (this.btnDisabled) return
      this.btnDisabled = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let param = {
            id: this.id,
            quantity: this.form.quantity
          }
          this.$ajaxPost('/coupon/coupon_package/modify_quantity', param).then(data => {
            this.$Notice.success({
              title: `修改成功`
            })
            this.$emit('complete')
            this.closeModal()
            this.btnDisabled = false
          }).catch(() => {
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      });
    }
  }
}
</script>

